import React, { useState } from "react";
import { Route } from "react-router-dom";
import AddArticle from "./AddArticle";
import AddMiQuan from "./AddMiQuan";
import MiQuanList from "./MiQuanList";
import ArticleList from './ArticleList'
import { Layout, Menu, Dropdown, message, Modal, Spin  } from "antd";
import {  DownOutlined, UserOutlined , FolderAddOutlined, ShareAltOutlined, PlusSquareOutlined, UnorderedListOutlined, SketchOutlined, AlertOutlined, AppstoreAddOutlined } from '@ant-design/icons';
// import headerTmp from '../components/Header'   
import AddShareTopic from './AddShareTopic'
import AddTopicItem from './AddTopicItems'
import shareTopicList from './shareTopicList'
import topicList from './TopicList'
import axios from "axios";
import servicePath from "../config/apiUrl";
import "../static/css/AdminIndex.scss";

const { Content, Sider } = Layout;
const { SubMenu } = Menu;
const { confirm } = Modal;

function AdminIndex(props) {
  const [collapsed, setCollapsed] = useState(false);
  const [typeInfo, setTypeInfo] = useState();
  const [openKeys, setOpenKeys] = useState(["sub1"])
  const [loading, setLoading] = useState(false) 
  const [ selectedKeys , setSelectedKeys] = useState(["addArticle"])
  const [modalTmpVisible, setModalTmpVisible] = useState(false)
  //从中台得到文章类别信息
  const getTypeInfo = () => {
    axios({
      method: "get",
      url: servicePath.getTypeInfo,
      header: { "Access-Control-Allow-Origin": "*" },
      withCredentials: false
    }).then(res => {
      if (res.data.data === "没有登录") {
        sessionStorage.removeItem("openId");
        sessionStorage.removeItem("userName");
        LogOut()
      } else {
        setTypeInfo(res.data.data);
      }
    }).catch((err)=>{
      message.error(err.response.data.data)
      if(err.response.status === 401){
        props.history.push("/login")
      }
      setLoading(false)
    })
  };
  // const PaginationSizeChanger = (page, pageSize) => {
  //   console.log(page,'252525',pageSize);
  //   getList(pageSize,page)
  // }
  //编写文章
  const onCollapse = collapsed => {
    setCollapsed(collapsed);
  };
  const handleClickArticle = e=>{
    // console.log(props.history)  
    if(e.key==='addArticle'){
      props.history.push('/index/add')
    }else{
      props.history.push('/index/list')
    }

  }
  const LogOut = () => {
    setLoading(true)
    message.error("未登录，请重新登录");
    setTimeout(() => {
      props.history.push('/login')
      setLoading(false)
    }, 800);
  }
  const handleClickAdvice = e => {
    if(sessionStorage.getItem('openId')){
      console.log('e.key',e.key);
      
      if(e.key==='addMiQuan'){
        props.history.push('/index/addMQuan/')
      }else if(e.key==='miQuanList'){
        props.history.push('/index/miQuanList/')
      }else if(e.key==='AddShareTopic'){
        props.history.push('/index/addShareTopic/')
      }else if(e.key==='shareTopicList'){
        props.history.push('/index/shareTopicList/')
      }else if(e.key==='addTopicItem'){
        props.history.push('/index/addTopicItem/')
      }else if(e.key==='topicList'){
        props.history.push('/index/topicList/')
      }
    } else {
      LogOut()
    }
  }
  const userCenter = () => {
    // console.log('22222222')
    setModalTmpVisible(true)
  }
  // 退出登录的方法
  const handleExit = e => { 
    confirm({
      title: '确定退出登录?',
      // icon: <ExclamationCircleOutlined />,
      // content: 'When clicked the OK button, this dialog will be closed after 1 second',
      onOk() {
        sessionStorage.removeItem("openId");
        sessionStorage.removeItem("userName");
        message.success("退出成功");
        props.history.push("/login");
      },
      onCancel() {
        message.error("取消退出");
      },
    });
    
  };
  const onSelect = (info) => {
    console.log('222222',info);
    setSelectedKeys(info.keyPath)
  }
  const onOpenChange = (info) => {
    setOpenKeys([info[info.length-1]])
    console.log(info,'infooooo',info[info.length-1]);
    console.log('66666666',openKeys);
    
  }
  const menu = (
    <Menu>
      <Menu.Item key="0">
        <span >设置</span>
      </Menu.Item>
      <Menu.Item key="1" onClick={ userCenter }>
        <span>关于</span>
      </Menu.Item>
      <Menu.Item key="2" onClick={ handleExit }>
        <span>退出</span>
      </Menu.Item>
      <Menu.Divider />
    </Menu>
  );
  return (
    <div style={{ minWidth: "1200px"}}>
    {
      loading? <Spin className="loadingSpin" />:
      (<Layout style={{ maxHeight: "100vh",height:"100vh" }}>
        <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
          <div className="logo" />
          {/* openKeys={openKeys} */}
          <Menu theme="dark" selectedKeys={selectedKeys} openKeys={openKeys} onOpenChange={onOpenChange} onSelect={onSelect} mode="inline">
            <Menu.Item key="title">
            <SketchOutlined />
              <span>工作台</span>
            </Menu.Item>
            <SubMenu
              key="sub1"
              onClick={handleClickArticle}
              title={
                <span>
                  <AppstoreAddOutlined />
                  <span>文章管理</span>
                </span>
              }
            >
              <Menu.Item key="addArticle">
                <PlusSquareOutlined />
                添加文章
              </Menu.Item>
              <Menu.Item key="articleList">
              <UnorderedListOutlined />
                文章列表
              </Menu.Item>
            </SubMenu>
            
            <SubMenu
              key="addMiQuan"
              onClick={handleClickAdvice}
              title={
                <span>
                  <AlertOutlined />
                  <span>推荐模块</span>
                </span>
              }
            >
              <Menu.Item key="addMiQuan"><PlusSquareOutlined />密圈</Menu.Item>
              <Menu.Item key="miQuanList">
                <UnorderedListOutlined />
                密圈列表
              </Menu.Item>
            </SubMenu>

            <SubMenu
              key="AddShareTopic"
              onClick={handleClickAdvice}
              title={
                <span>
                  <ShareAltOutlined />
                  <span>分享模块</span>
                </span>
              }
            >
              <Menu.Item key="AddShareTopic"><PlusSquareOutlined />专题</Menu.Item>
              <Menu.Item key="shareTopicList"><UnorderedListOutlined />专题列表</Menu.Item> 
              <Menu.Item key="addTopicItem"><PlusSquareOutlined />添加详情</Menu.Item>
              <Menu.Item key="topicList"><UnorderedListOutlined />详情表单</Menu.Item>
            </SubMenu>

            <Menu.Item key="9">
            <FolderAddOutlined />
              <span>添加类别信息</span>
            </Menu.Item>
          </Menu>
        </Sider>
      <Layout>
        {/* <Header style={{ background: "#fff", padding: 0 }} /> */}

        {/* <HeaderTmp /> */}
        <Content>
          {/* <Breadcrumb style={{ height: "40px",lineHeight:"40px",paddingLeft:'16px',background:"rgba(0, 33, 64,.84)",color:"#fcffff" }}>
            <Breadcrumb.Item>后台管理</Breadcrumb.Item>
            <Breadcrumb.Item>工作台</Breadcrumb.Item>
          </Breadcrumb> */}
          <div className="BreadcrumbBox">
            <div className="BreadcrumbBoxList">Lbxin 后台管理</div>
            <div className="BreadcrumbBoxList"></div>
            <Dropdown overlay={menu} trigger={['click']}>
              <a style={{ color: '#fff'}} onClick={e => e.preventDefault()}>
              <UserOutlined /> <span style={{fontSize:'16px',marginRight:'5px'}}>{sessionStorage.getItem('userName')?sessionStorage.getItem('userName'):"暂无 "}</span><DownOutlined />
              </a>
            </Dropdown>
          </div>
          <div style={{ padding: 20, margin: "0 16px", background: "#fff", minHeight: 360,maxHeight: "calc(100vh - 60px)" }}>
            {/* <SearchTmp searchData={ searchData } /> */}
            {/* <Router> */}
              <Route path="/index/" exact component={AddArticle} />
              {/* <Route path="/index/" exact component={shareTopicList} /> */}
              <Route path="/index/add/" exact  component={AddArticle} />
              <Route path="/index/add/:id"  exact component={AddArticle} />  
              <Route path="/index/addMQuan/" exact  component={AddMiQuan} />
              <Route path="/index/addShareTopic/" exact  component={AddShareTopic} />
              <Route path="/index/addTopicItem/" exact  component={AddTopicItem} />
              <Route path="/index/addTopicItem/:id" exact  component={AddTopicItem} setCollapsed={()=> {setCollapsed()}} />
              <Route path="/index/addShareTopic/:id" exact  component={AddShareTopic} />
              <Route path="/index/shareTopicList" exact  component={shareTopicList} />
              <Route path="/index/topicList" exact  component={topicList} />
              <Route path="/index/addMQuan/:id" exact  component={AddMiQuan} />
              <Route path="/index/miQuanlist/" exact component={MiQuanList} />
              <Route path="/index/list"  component={ArticleList} />
            {/* </Router> */}
          </div>
        </Content>
        {/* <Footer style={{ textAlign: "center" }}>Lbxin.com</Footer> */}
      </Layout>
    </Layout>)
  }
    <Modal
      title="关于"
      cancelText="确定"
      okText="0"
      maskClosable ="false"
      visible={modalTmpVisible}
      onCancel={()=>{setModalTmpVisible(false)}}
    >
      <p>项目：Lbxin 后台</p>
      <p>作者：Lbxin</p>
      <p>简介：Lbxin 项目后台控制台，包括个人博客等</p>
    </Modal>
    </div>
  );
}

export default AdminIndex;
